import React, {Component} from 'react';
import axios from "axios";
import './css/film.css'

const globalContext = React.createContext();

class Film extends Component {
    render() {
        return <globalContext.Consumer>
            {
                value =>
                    <div>
                        <div className="film">
                            <img onClick={() => value.changeContent(this.props.synopsis)}
                                 src={this.props.poster}
                                 alt={this.props.name}/>
                            <span>{this.props.name}</span>
                        </div>
                    </div>

            }
        </globalContext.Consumer>
    }
}

class App extends Component {
    constructor(props) {
        super(props);
        axios.get("/test.json").then(res => {
            this.setState({list: res.data.data.films})
        })
    }

    state = {
        list: [],
        content: ''
    }

    render() {
        return <globalContext.Provider value={{
            content: this.state.content,
            changeContent: synopsis => {this.setState({content: synopsis})},
        }}>
            <div>
                {
                    this.state.list.map(item =>
                        <Film key={item.filmId}
                              {...item}>
                        </Film>)
                }
                <FilmDetail></FilmDetail>
            </div>
        </globalContext.Provider>
    }
}

class FilmDetail extends Component {
    render() {
        return <globalContext.Consumer>
            {
                value =>
                    <div className="filmDetail">
                        {value.content}
                    </div>
            }
        </globalContext.Consumer>
    }
}

export default App;